<template>
<x-main>
  <view class="x-box x-small-top">
    <x-preview :data="orderInfo" :columns="orderCol"></x-preview>
  </view>

  <view class="x-box">
    <x-preview :data="orderInfo" :columns="userCol">

    </x-preview>
  </view>

  <view class="x-box">
    <x-preview :data="orderInfo" :columns="otherCol">

    </x-preview>
  </view>
  <view @click="onBill" class="link">查看账单明细</view>
</x-main>
  <x-order-qrcode ref="orderQrcodeRef"></x-order-qrcode>
<x-bottom v-if="!$emptyJson(orderInfo) && orderInfo.orderState != ORDER.KEY.FINISH && orderInfo.orderState != ORDER.KEY.DISCONTINUE && orderInfo.orderState != ORDER.KEY.CANCEL">
  <view v-if="orderInfo.orderState == ORDER.KEY.WAIT_CONFIRM || orderInfo.orderState == ORDER.KEY.WAIT_PAID" class="note">注：请先「出示订单二维码」给用户扫码确认</view>
  <view class="x-space-between">
    <view @click="onSetting" v-if="orderInfo.orderState != ORDER.KEY.FINISH && orderInfo.orderState != ORDER.KEY.DISCONTINUE && orderInfo.orderState != ORDER.KEY.CANCEL" :class="{btn:  orderInfo.orderState != ORDER.KEY.RECOVERY_IN_PROGRESS, btn2: orderInfo.orderState == ORDER.KEY.RECOVERY_IN_PROGRESS}" class="x-btn x-btn-primary">扣款设置</view>
    <view @click="onCancel" v-if="orderInfo.orderState == ORDER.KEY.WAIT_CONFIRM || orderInfo.orderState == ORDER.KEY.WAIT_PAID" class="x-btn x-btn-primary btn">取消订单</view>
    <view @click="onEnd" v-if="orderInfo.orderState == ORDER.KEY.UNDERWAY" class="x-btn x-btn-primary btn">终止订单</view>
    <view @click="onDeposit" v-if="orderInfo.orderState == ORDER.KEY.RECOVERY_IN_PROGRESS || orderInfo.orderState == ORDER.KEY.UNDERWAY" :class="{btn:  orderInfo.orderState != ORDER.KEY.RECOVERY_IN_PROGRESS, btn2: orderInfo.orderState == ORDER.KEY.RECOVERY_IN_PROGRESS}" class="x-btn x-btn-primary btn">押金处理</view>
    <view @click="openQrcode" v-if="orderInfo.orderState == ORDER.KEY.WAIT_CONFIRM || orderInfo.orderState == ORDER.KEY.WAIT_PAID" class="x-btn x-btn-primary btn">出示订单二维码</view>
  </view>
</x-bottom>
</template>

<script setup>
import XOrderQrcode from '@/components/logic/order/qrcode';
import XPreview from '@/components/lib/preview'
import {reactive, ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";
import orderStore from '@/stores/modules/order';
import {storeToRefs} from "pinia";
const OrderStore = orderStore();
const {orderInfo} = storeToRefs(OrderStore);
import {Helper, Constant,GlobalConfig, Msg} from 'core';
const {productConfig} = storeToRefs(GlobalConfig());
//订单基本信息
const orderCol =  ref([
  {label: "订单标签", field: "orderTagDesc"},
  {label: "每期金额", field: "termAmount", suffix: "元"},
  {label: "期数", field: "leaseTerm", suffix: "期"},
  {label: "起租日", field: "leaseStartDate"},
  {label: "还款周期", field: "payCycleDesc"},
  {label: "押金金额", field: "deposit", value: "0", format: (c, d) => {
      let deposit = Helper.empty(d.deposit) ? 0 : d.deposit;
      let depositType = productConfig.value.depositTypeDict.find(x => x.value == d.depositType);
      if(! Helper.empty(depositType)) {
        return `${deposit}元(${depositType.label})`
      }
      return deposit + '元'
    }},
  {label: "订单服务费", field: "serviceFee", suffix: "元", check: () => {
      return productConfig.value.openServiceFee;
    }, format: (c,d) => {
      let payerDesc = d.serviceFeePayer == 1 ? '商家支付' : "用户支付"
      if(! Helper.empty(d.serviceFee)) {
        return d.serviceFee + "元(" + payerDesc + ")"
      }
    }},
  {label: "其它费用", field: "otherFees", suffix: "元", value: "0", check: () => {
      return productConfig.value.openOtherFee;
    }},
  {label: "订单状态", field: "orderStateDesc"},
  {label: "订单备注", field: "orderRemark"}
]);

//订单服务费费用
const userCol =  ref([
  {label: "用户姓名", field: "ownerName"},
  {label: "用户手机号", field: "ownerPhone"}
]);

//订单服务费费用
const otherCol =  ref([
  {label: "订单编号", field: "orderNo"},
  {label: "创建时间", field: "createTime"}
]);

const state = reactive({
  orderNo: "",
})

onLoad(async option => {
  state.orderNo = option.orderNo;
  await OrderStore.getInfo(state.orderNo);
  // orderInfo.value.orderState = Constant.ORDER.KEY.RECOVERY_IN_PROGRESS
})

// onShow(() => {
//
// })

/**
 * 查看账单明细
 * */
const onBill = () => {
  uni.navigateTo({url: "/pages/bill/list?orderNo=" + state.orderNo})
}

/**
 * 扣款设置
 * */
const onSetting = () => {
  uni.navigateTo({url: "/pages/order/setting?orderNo=" + state.orderNo})
}

/**
 * 取消订单
 **/
const onCancel = () => {
  Msg.confirm("您确定取消该订单吗？", {title: "订单取消提醒",})
      .then(async _ => {
        let isOk = await OrderStore.cancel(state.orderNo)
        if(isOk) {
          await OrderStore.getInfo(state.orderNo);
        }
      })
}

/**
 * 终止订单
 */
const onEnd = () => {
  Msg.confirm("终止订单视为提前终止订单，后续的账期用户将无法付款或者系统代扣。终止操作不可恢复，确定终止订单吗？", {
    title: "订单终止提醒",
    confirmText: "终止订单"})
  .then(async _ => {
    let isOk = await OrderStore.end(state.orderNo)
    if(isOk) {
      await OrderStore.getInfo(state.orderNo);
    }
  })
}

/**
 * 处理押金
 */
const onDeposit = () => {
  uni.navigateTo({
    url: "/pages/deposit/info?orderNo=" + state.orderNo
  })
}

const orderQrcodeRef = ref(null);
const openQrcode = () => {
  orderQrcodeRef.value.open(orderInfo.value.orderNo);
}
</script>

<style scoped lang="less">
.x-box {
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.link {
  color: @primary;
  padding-top: 60rpx;
  text-align: center;
}

.note {
  color: red;
  font-size: 24rpx;
  padding: 10rpx;
  box-sizing: border-box;
  text-align: center;
}

.btn {
  width: 30%
}

.btn2 {
  width: 48%
}
</style>
